<script setup lang='ts' name="breadcrumb">
import { ArrowRight } from '@element-plus/icons-vue'
import { toRefs } from 'vue'

const props = defineProps<{
    data?: any
}>()

const emits = defineEmits(['clickHandle'])

const { data } = toRefs(props)

function goTo(item: any, i: number) {
    // 一级类目数量巨大 不查询
    if (item.leaf === 0 && i === 0) {
        return
    }
    emits('clickHandle', item)
}
</script>

<template>
    <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item v-for="(item, index) in data"
                            :key="index"
                            :to="item.to"
                            class="cursor-pointer"
                            @click="goTo(item, index)"
        >
            {{ item.categoryName }}
        </el-breadcrumb-item>
    </el-breadcrumb>
</template>

<style lang="less" scoped>
.el-breadcrumb {
    line-height: 60px;

    :deep(.el-breadcrumb__inner) {
        color: #767676;
    }

    :deep(.is-link) {
        font-weight: normal;
    }

    .el-breadcrumb__item:last-child {
        :deep(.el-breadcrumb__inner) {
            color: #da0004;
            cursor: pointer;
        }
    }
}
</style>
